<template>
  <div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
       <!-- 九宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item to="/newList">
       <img src="../assets/images/menu1.png" alt="">
       <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="photoList">
       <img src="../assets/images/menu2.png" alt="">
       <p>图片分享</p>
      </van-grid-item>
      <van-grid-item to="goodsList">
       <img src="../assets/images/menu3.png" alt="">
       <p>商品购买</p>
      </van-grid-item>
      <van-grid-item >
       <img src="../assets/images/menu4.png" alt="">
       <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
       <img src="../assets/images/menu5.png" alt="">
       <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
       <img src="../assets/images/menu6.png" alt="">
       <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperList:[]
    };
  },

  methods: {
    async getSwiper(){
      var {data:res}=await this.axios.get('/api/getlunbo')
      console.log(res);
      if(res.status !==0){
        return this.$toast.fail('失败文案');
      }
      this.swiperList=res.message
      console.log(this.swiperList);
      
    }
  },

  created() {
    this.getSwiper()
  }
};
</script>

<style lang='less' scoped>
.van-swipe {
    height: 40vw;
    width: 100%;
    background-color: pink;
}
.van-swipe-item img{
  width: 100%;
  height: 100%;
}

.van-grid-item {
  width:33.3%;
  img{
    width: 60%;
  }
}
</style>
